<!--工作/实习经历-->
<template>
  <view>
    <myHead
      :title="title"
      :right="true"
      text_right="保存"
      @clickRight="clickRight"
    ></myHead>
    <view class="conten">
      <view class="li-box">
        <view class="name">公司名称</view>
        <view style="width: 75%">
          <input
            v-model="company"
            placeholder-class="input_pal"
            type="text"
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="li-box fl-lr-c">
        <view class="name">职位名称</view>
        <view>
          <input
            v-model="position"
            placeholder-class="input_pal"
            type="text"
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="li-box fl-lr-c">
        <view class="name">当前月薪(元)</view>
        <view>
          <input
            @input="numberFixedDigit"
            v-model="salary"
            placeholder-class="input_pal"
            type="text"
            placeholder="请输入"
          />
        </view>
      </view>

      <view class="li-box fl-lr-c">
        <view class="name">所属行业</view>
        <view class="fl-t">
          <view style="flex: 100%">
            <uni-data-picker
              :localdata="items4"
              v-model="Industry"
              :isAdd="true"
              style="width: 400rpx"
              :clear-icon="false"
              popup-title="请选择所属行业"
              ref="picker1"
              @change="onchange1"
            >
            </uni-data-picker>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <view class="li-box fl-lr-c">
        <view class="name">职位类别</view>
        <view class="fl-t">
          <view>
            <uni-data-picker
              :localdata="items5"
              v-model="PositionId"
              :clear-icon="false"
              :isAdd="true"
              style="width: 400rpx"
              popup-title="请选择职位类别"
              ref="picker2"
              @change="onchange2"
            >
            </uni-data-picker>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <u-datetime-picker
        v-if="show1"
        :show="show1"
        mode="year-month"
        title="请选择入职时间"
        closeOnClickOverlay
        @close="show1 = false"
        :minDate="minDate"
        :maxDate="maxDate"
        @cancel="show1 = false"
        @confirm="changeDirthDate"
        v-model="value1"
      >
      </u-datetime-picker>

      <u-datetime-picker
        v-if="show2"
        :show="show2"
        mode="year-month"
        title="请选择离职时间"
        closeOnClickOverlay
        @close="show2 = false"
        :minDate="dimissionTime"
        :maxDate="maxDate"
        @cancel="show2 = false"
        v-model="value2"
        @confirm="changeDirthDate"
      >
      </u-datetime-picker>
      <view class="li-box fl-lr-c">
        <view class="name">在职时间</view>
        <view class="fl-t">
          <view class="content fl-t">
            <text @click="linJob(1)">
              <text v-if="startTime">{{ startTime | formatDateYM }}</text>
              <text v-else>入职时间</text>
            </text>
            <view class="connect">-</view
            ><text @click="linJob(2)">
              <text v-if="endTime">{{ endTime | formatDateYM }}</text>
              <text v-else>离职时间</text>
            </text>
          </view>
          <!-- <u-icon name="arrow-right"></u-icon> -->
        </view>
      </view>
      <view class="li-box fl-lr-c" @click="nengliMD()">
        <view class="name">能力标签</view>
        <view class="namebox" style="display: flex">
          <view class="dynamicTagsview"> </view>
          <view style="display: flex; color: #999999">
            {{ tags.length > 0 ? "已输入（" + tags.length + "）" : "请输入" }}
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view class="li-box directionColumn">
        <view class="name">工作描述</view>
        <u--textarea
          style="margin-top: 30rpx"
          :confirmType="null"
          v-model="describe"
          placeholder="请输入内容"
          count
          :height="140"
          :adjust-position="false"
          maxlength="3000"
        >
        </u--textarea>
      </view>
    </view>
    <bottomBut @bottomBut="bottomBut" v-if="type == 2"></bottomBut>
  </view>
</template>

<script>
import utils from "@/common/tui-utils/tui-utils.js";
import bottomBut from "@/pages/component/bottomBut.vue";
import { mapState, mapMutations } from "vuex";
import {
  atPresentTime,
  atPresentTimeX,
  specifyBeforeVX,
  TimeString,
} from "@/utils/Time";
export default {
  data() {
    return {
      title: "工作/实习经历",
      type: 0, //1 add  2编辑
      show1: false,
      show2: false,
      company: "",
      position: "",
      salary: "",
      Industry: "",
      PositionId: "",
      startTime: "",
      endTime: "",
      describe: "",
      items5: [],
      items4: [], //行业
      dateType: 1,
      // 当前id
      Id: 0,
      // 父id
      fuid: 0,
      resumeList: [],
      maxDate: "",
      minDate: "",
      value1: "",
      value2: "",
    };
  },
  //子组件
  components: {
    bottomBut,
  },
  onLoad(o) {
    this.maxDate = atPresentTime();
    this.minDate = atPresentTimeX(60);
    this.type = o.type;
    this.fuid = o.fuid;
    if (this.type == 2) {
      let data = JSON.parse(o.data);
      this.Id = data.Id;
      this.Industry = data.Industry;
      this.Category1 = data.Category1;
      this.Category2 = data.Category2;
      this.Category3 = data.Category3;
      this.PositionId = data.PositionId;
      this.company = data.CompanyName;
      this.position = data.PositionName;
      this.salary = data.Wage;
      this.startTime = data.StartDate.split(" ")[0];
      this.endTime = data.EndDate.split(" ")[0];
      this.describe = data.WorkContent;
      if (data.Emphasis ? data.Emphasis.length > 0 : false) {
        this.setTags(data.Emphasis.split(","));
      } else {
        this.setTags([]);
      }
    } else {
      this.setTags([]);
    }
  },
  created() {
    this.xialadata();
  },
  // 计算方法
  methods: {
    ...mapMutations(["setTags"]),
    nengliMD() {
      uni.navigateTo({
        url:
          "/pages/views/packageB/type-jobhunting/resume/edit/capabilityTag?id=" +
          this.Category3,
      });
    },
    xialadata() {
      // 行业
      this.$http.dic.coreSelector(366287052411013).then((res) => {
        if (res.Success) {
          this.items4 = this.subTree(res.Result);
        }
      });
      // 职位
      this.$http.huirc.jobcategorytree().then((res) => {
        this.items5 = this.subTree(res.Result);
      });
    },
    onchange1(e) {
      this.Industry = e.detail.value[e.detail.value.length - 1].value;
    },

    onchange2(e) {
      let OrgId = e.detail.value[e.detail.value.length - 1].value;
      this.Category1 = e.detail.value[0].value;
      this.Category2 = e.detail.value[1].value;
      this.Category3 = e.detail.value[2].value;
      this.PositionId = OrgId;
    },
    //树形结构数据
    subTree(arr, fatherArr) {
      let totalArr;
      if (fatherArr !== undefined) {
        totalArr = fatherArr.children;
      } else {
        totalArr = [];
      }
      arr.forEach((item, index) => {
        let obj = {};
        obj.text = item.FullName;
        obj.value = item.Id;
        obj.children = [];
        if (item.Children !== null && item.Children.length != 0) {
          this.subTree(item.Children, obj);
        }
        totalArr.push(obj);
      });
      return totalArr;
    },
    xialist(arr) {
      let drr = [];
      arr.forEach((res) => {
        let obj = {
          text: res.FullName,
          value: res.EnCode,
        };
        drr.push(obj);
      });
      return [drr];
    },
    numberFixedDigit(e) {
      // 只能输入整数
      e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, "");
      this.$nextTick(() => {
        this.salary = e.target.value;
      });
    },
    clickRight() {
      // //校验
      if (!utils.trim(this.company).length) {
        this.$util.toast("请输入公司名称");
        return;
      }
      if (!utils.trim(this.position).length) {
        this.$util.toast("请输入职位名称");
        return;
      }

      if (!this.salary > 0) {
        this.$util.toast("请输入月薪");
        return;
      }

      if (!this.Industry) {
        this.$util.toast("请选择所属行业");

        return;
      }
      if (!this.PositionId) {
        this.$util.toast("请选择职位类别");
        return;
      }

      if (!this.startTime.length) {
        this.$util.toast("请选择入职时间");
        return;
      }
      if (!this.endTime.length) {
        this.$util.toast("请选择离职时间");
        return;
      }

      if (!this.tags.length) {
        this.$util.toast("请输入能力标签");
        return;
      }

      if (!this.describe.length) {
        this.$util.toast("请输入工作描述");
        return;
      }
      let Emphasis = this.tags.join(",");
      if (this.type == 2) {
        //编辑修改
        this.$http.huirc
          .resumeworkexpup({
            Id: this.Id,
            ResumeId: Number(this.fuid),
            CompanyName: this.company,
            Category1: this.Category1,
            Category2: this.Category2,
            Category3: this.Category3,
            Industry: this.Industry,
            PositionId: this.PositionId,
            PositionName: this.position,
            StartDate: this.startTime,
            EndDate: this.endTime,
            WorkContent: this.describe,
            Wage: Number(this.salary),
            Emphasis: Emphasis,
          })
          .then((res) => {
            if (res.Success) {
              this.$util.toast("保存成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            }
          });
      } else {
        this.$http.huirc
          .resumeworkexpcr({
            ResumeId: this.fuid,
            CompanyName: this.company,
            Category1: this.Category1,
            Category2: this.Category2,
            Category3: this.Category3,
            Industry: this.Industry,
            PositionId: this.PositionId,
            PositionName: this.position,
            StartDate: this.startTime,
            EndDate: this.endTime,
            WorkContent: this.describe,
            Wage: this.salary,
            Emphasis: Emphasis,
          })
          .then((res) => {
            if (res.Success) {
              this.$util.toast("保存成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            }
          });
      }
    },
    linJob(type) {
      this.dateType = type;
      if (type == 1) {
        this.value1 = this.startTime
          ? this.startTime
          : TimeString(this.maxDate);
        this.show1 = true;
      } else {
        this.value2 = this.endTime ? this.endTime : TimeString(this.maxDate);
        this.show2 = true;
      }
    },
    changeDirthDate(e) {
      const timeFormat = uni.$u.timeFormat;
      let ds = timeFormat(e.value, "yyyy-mm-dd");
      if (this.dateType == 1) {
        this.startTime = ds;
        this.show1 = false;
      } else {
        this.endTime = ds;
        this.show2 = false;
      }
    },

    bottomBut() {
      let that = this;
      uni.showModal({
        title: "删除提示",
        content: "确认要删除这条数据",
        success: function (res) {
          if (res.confirm) {
            let data = {
              Id: that.Id,
            };
            that.$http.huirc.resumeworkexpdel(data).then((res) => {
              if (res.Success) {
                that.$util.toast("删除成功");
                setTimeout(() => {
                  uni.navigateBack();
                }, 1600);
              }
            });
          }
        },
      });
    },

    open() {},
  },
  computed: {
    ...mapState({
      tags: (state) => state.tags,
    }),
    dimissionTime() {
      if (this.startTime) {
        return specifyBeforeVX(this.startTime, 0);
      } else {
        return this.minDate;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dynamicTagsview {
  display: flex;
  flex-wrap: wrap;

  .everylast {
    border: 1px solid #cfd1d7;
    padding: 5rpx 10rpx;
    margin: 0rpx 10rpx 10rpx 10rpx;
    position: relative;
  }

  .iconview {
    position: absolute;
    top: -15rpx;
    right: -15rpx;
  }

  .input-new-tag {
    width: 80rpx;
  }

  .colse {
    top: 0;
    right: 0;
  }
}

.unidatapickert {
  position: fixed;
  left: -5000px;
  z-index: 99;
}

.conten {
  .directionColumn {
    flex-direction: column;
  }
}

.li-box {
  display: flex;
  justify-content: space-between;

  .name {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    flex-shrink: 0;
  }

  .logo {
    width: 106rpx;
    height: 106rpx;
    border-radius: 50%;
  }

  .input_pal,
  input,
  .content {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    text-align: end;

    .connect {
      padding: 0 20rpx;
      color: #000;
      font-size: 32rpx;
    }
  }

  .radio-box {
    margin-left: 50rpx;

    .radio-text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      padding-left: 20rpx;
    }
  }

  .tui-textarea {
    flex: 1;
  }
}

.capabilityTag {
  padding: 20rpx 30rpx;
  width: 650rpx;

  .title {
    text-align: center;
    padding: 10px 0 20px 0;
    font-size: 32rpx;
    font-weight: 800;
  }

  .exhibition {
    height: 300rpx;
    margin-bottom: 30rpx;

    .exhibition-ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .everylastds {
        background-color: #e7f5ff;
        border-color: #e2f0ff;
        padding: 10rpx 10rpx;
        font-size: 24rpx;
        color: #3c9cff;
        font-weight: bold;
        border-width: 1px;
        border-style: solid;
        border-radius: 200rpx;
        box-sizing: border-box;
        white-space: nowrap;
        margin: 0 20rpx 20rpx 0;
        width: 30%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }

  .bottom-input {
    display: flex;
    justify-content: space-around;
  }
}
</style>